<template>
  <!-- 新增PageContainer：统一页面标题栏风格，与创建公告/征文页面保持一致 -->
  <PageContainer title="重置密码">
    <div class="password-container">
      <!-- 卡片容器：增强阴影层次感，优化内边距 -->
      <el-card class="password-card">
        <!-- 卡片头部：优化标题样式，去除默认间距 -->
        <template #header>
          <div class="card-header">
            <span class="header-title">账户密码修改</span>
            <span class="header-desc">请输入原密码并设置新密码（6-20位字符）</span>
          </div>
        </template>

        <!-- 表单区域：优化间距，提升可读性 -->
        <el-form 
          ref="formRef"
          :model="formModel" 
          :rules="rules" 
          label-width="120px"
          class="password-form"
          :disabled="submitLoading" 
        >
          <!-- 原密码输入框 -->
          <el-form-item label="原密码" prop="old_pwd">
            <el-input 
              v-model="formModel.old_pwd" 
              type="password" 
              show-password
              placeholder="请输入当前登录密码"
              class="input-item"
            ></el-input>
          </el-form-item>
          
          <!-- 新密码输入框 -->
          <el-form-item label="新密码" prop="new_pwd">
            <el-input 
              v-model="formModel.new_pwd" 
              type="password" 
              show-password
              placeholder="请设置6-20位新密码"
              class="input-item"
            ></el-input>
          </el-form-item>
          
          <!-- 确认新密码输入框 -->
          <el-form-item label="确认新密码" prop="re_pwd">
            <el-input 
              v-model="formModel.re_pwd" 
              type="password" 
              show-password
              placeholder="请再次输入新密码"
              class="input-item"
            ></el-input>
          </el-form-item>
          
          <!-- 提交按钮区域：居中布局，添加加载状态 -->
          <el-form-item class="submit-btn-group">
            <el-button 
              type="primary" 
              @click="submitForm" 
              :loading="submitLoading"
              class="submit-btn"
            >
              确认修改
            </el-button>
            <el-button 
              type="text" 
              @click="resetForm"
              :disabled="submitLoading"
            >
              重置表单
            </el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </PageContainer>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { userUpdatePasswordService } from '@/api/admin';
// 引入统一页面容器组件（与创建公告/征文页面一致）
import PageContainer from '@/components/PageContainer.vue';

// 表单数据模型
const formModel = ref({
  old_pwd: '',
  new_pwd: '',
  re_pwd: ''
});

// 提交加载状态（新增：防止重复提交，提升体验）
const submitLoading = ref(false);

// 表单引用
const formRef = ref(null);

// 表单校验规则（优化：新增change触发，实时校验；补充密码复杂度提示）
const rules = {
  old_pwd: [
    { required: true, message: '请输入原密码', trigger: ['blur', 'change'] },
    { min: 6, max: 20, message: '密码长度需在6-20个字符之间', trigger: ['blur', 'change'] }
  ],
  new_pwd: [
    { required: true, message: '请输入新密码', trigger: ['blur', 'change'] },
    { min: 6, max: 20, message: '密码长度需在6-20个字符之间', trigger: ['blur', 'change'] },
    // 可选：添加密码复杂度校验（如包含字母+数字）
    { 
      pattern: /^(?=.*[A-Za-z])(?=.*\d).{6,20}$/, 
      message: '密码需包含至少1个字母和1个数字', 
      trigger: ['blur', 'change'] 
    }
  ],
  re_pwd: [
    { required: true, message: '请确认新密码', trigger: ['blur', 'change'] },
    { 
      validator: (rule, value, callback) => {
        if (!value) {
          callback(new Error('请确认新密码'));
        } else if (value !== formModel.value.new_pwd) {
          callback(new Error('两次输入的密码不一致，请重新输入'));
        } else {
          callback();
        }
      },
      trigger: ['blur', 'change']
    }
  ]
};

// 提交表单（优化：新增加载状态、成功后重置表单、错误提示细化）
const submitForm = async () => {
  try {
    // 1. 表单校验
    await formRef.value.validate();
    // 2. 开启加载状态
    submitLoading.value = true;
    // 3. 调用修改密码接口
    const res = await userUpdatePasswordService(formModel.value);
    // 4. 接口响应处理（假设接口返回 { code: '0000', msg: 'success' } 格式）
    if (res.code === '0000') {
      ElMessage.success(res.msg || '密码修改成功！请重新登录');
      // 5. 成功后重置表单
      resetForm();
      // 可选：密码修改成功后跳转登录页（根据业务需求决定）
      // router.push('/login');
    } else {
      ElMessage.error(res.msg || '密码修改失败，请重试');
    }
  } catch (error) {
    // 区分表单校验错误和接口错误
    if (error.name !== 'Error') {
      ElMessage.error('表单填写有误，请检查后提交');
    } else {
      ElMessage.error(error.message || '服务器异常，修改失败');
    }
    console.error('密码修改异常：', error);
  } finally {
    // 关闭加载状态
    submitLoading.value = false;
  }
};

// 重置表单（新增：便捷清空表单内容）
const resetForm = () => {
  formRef.value?.resetFields();
  formModel.value = { old_pwd: '', new_pwd: '', re_pwd: '' };
};
</script>

<style scoped lang="scss">
// 外层容器：保持居中布局，优化上下间距
.password-container {
  padding: 30px 20px;
  max-width: 650px;
  margin: 0 auto;
  min-height: calc(100vh - 120px); // 适配页面高度，防止内容过短
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

// 卡片容器：增强阴影，优化内边距，与其他组件风格统一
.password-card {
  width: 100%;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  overflow: hidden;
}

// 卡片头部：优化标题与描述的样式间距
.card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  .header-title {
    font-size: 16px;
    font-weight: 500;
    color: #303133;
  }
  .header-desc {
    font-size: 12px;
    color: #909399;
  }
}

// 表单区域：优化与卡片的间距
.password-form {
  margin-top: 24px;
  padding: 0 10px;
}

// 输入框：统一高度和样式
.input-item {
  height: 40px;
  font-size: 14px;
}

// 提交按钮组：居中布局，优化按钮间距
.submit-btn-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

// 确认按钮：统一宽度，增强视觉识别
.submit-btn {
  width: 140px;
}

// 适配小屏幕：响应式调整
@media (max-width: 768px) {
  .password-container {
    padding: 20px 15px;
    max-width: 100%;
  }
  .password-form {
    padding: 0 5px;
  }
  .el-form-item {
    margin-bottom: 16px;
  }
}
</style>